<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
      text-color="#fff" @open="handleOpen" @close="handleClose" :collapse="store.isCollapse">
      <p id="title">{{title }}</p>
      <MenuTree :routes="routes"/>
      <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>Navigator One</span>
            </template>
            <el-menu-item-group title="Group One">
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>ell
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>Navigator Two</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document import {reactive} from 'vue'
  const routes:[]=useRouter().options.routes;ree</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>Navigator Four</span>
          </el-menu-item> -->
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import MenuTree from './menuTree.vue';
  import {useRouter} from 'vue-router'
  import {useStore} from '../../../utils/store'
  const store=useStore()
  const routes=useRouter().options.routes[1].children
  console.log(routes,'children')
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const title = ref(import.meta.env.VITE_MENU_NAME);
  // console.log(import.meta.env.V账号管理_MENU_NAME)
  </script>
  <style lang="scss" scoped>
  .el-menu-vertical-demo {
    height: 100%;
  
    #title {
      text-align: center;
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      color: #FFF;
      // white-space: nowrap;
    }
    
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
  </style>